<template lang="html">
  <div class="box">
      <div class="header">
          <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
              <el-input placeholder="请输入运营商名称" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form>
      </div>

      <div class="body" v-loading="loading">
          <el-table :data="tableData.list" border style="width: 100%">
              <el-table-column label="运营商名称" prop="company" align="center" width="">
                  <!-- <template slot-scope="scope">
                    <el-popover trigger="click" @show="getAgentDetail(scope.row)" placement="right">
                          <div  v-loading="agentNameLoading">
                            <p>负责人: {{agentNameData.leader}}</p>
                            <p>电话: {{agentNameData.phone}}</p>
                            <p>注册地址: {{agentNameData.province}}-{{agentNameData.city}}-{{agentNameData.county}}-{{agentNameData.address}}</p>
                            <p>开户行: {{agentNameData.bank}}</p>
                            <p>开户账号: {{agentNameData.account}}</p>
                            <p>开户人: {{agentNameData.bank_name}}</p>
                            <p>系统开通时间: {{agentNameData.audit_time}}</p>
                          </div>

                          <div slot="reference" class="name-wrapper">
                              <el-button type="primary" size="mini" plain>{{scope.row.company}}</el-button>
                          </div>
                    </el-popover>
                  </template> -->
              </el-table-column>
              <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
              <el-table-column label="联系电话" prop="phone" align="center" width=""></el-table-column>
              <el-table-column label="地区详情" prop="area_num" align="center" width=""></el-table-column>
              <el-table-column label="收入" align="center" width="">
                    <el-table-column label="售卡分佣" align="center" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" plain  @click="agentCardIncList(scope.row)">{{scope.row.cardIncome}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="推荐奖励" align="center" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" plain @click="agentRecomList(scope.row)">{{scope.row.recomIncome}}</el-button>
                        </template>
                    </el-table-column>
              </el-table-column>
              <el-table-column label="支出" align="center" width="">
                    <el-table-column label="系统使用费" align="center" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" plain @click="agentSystemFeeList(scope.row)">{{scope.row.systemExpend}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域使用费" align="center" >
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" plain @click="agentPledgeList2(scope.row)">{{scope.row.pledge}}</el-button>
                        </template>
                    </el-table-column>
              </el-table-column>
              <el-table-column label="提现" align="center" width="">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" plain @click="agentCashList(scope.row)">{{scope.row.cash_money}}</el-button>
                  </template>
              </el-table-column>
              <el-table-column label="系统余额" prop="system_balance" align="center" width=""></el-table-column>
              <el-table-column label="运营商纯利" prop="profit" align="center" width=""></el-table-column>
          </el-table>
      </div>

      <div class="page_box">
        <el-pagination class="page" layout="prev, pager, next"
          @current-change="onpage" :current-page="currentPage" :page-count='tableData.rows' >
        </el-pagination>
      </div>

      <el-dialog title="售卡分佣" :visible.sync="dialogTableVisible">
        <el-table :data="agentCardIncListData.list">
            <el-table-column width="" align="center" property="amount" label="售卡分佣"></el-table-column>
            <el-table-column width="" align="center" property="shop_name" label="维修厂名称"></el-table-column>
            <el-table-column width="" align="center" property="user_name" label="车主姓名"></el-table-column>
            <el-table-column width="" align="center" property="card_price" label="购卡金额"></el-table-column>
            <el-table-column width="" align="center" label="车型">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>{{ scope.row.car_type }}-{{ scope.row.car_brand }}</p>
                        <el-button type="primary" size="mini" plain slot="reference">{{scope.row.car_type}}</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column width="" align="center" property="create_time" label="时间"></el-table-column>
        </el-table>
        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage1(this.currentRow,currentPage1)" :current-page.sync="currentPage1" :page-count='agentCardIncListData.rows' >
            </el-pagination>
        </div>
      </el-dialog>

      <el-dialog title="推荐奖励" :visible.sync="dialogTableVisible1">
        <el-table :data="agentRecomListData.list">
            <el-table-column width="" align="center" property="share_name" label="推荐者"></el-table-column>
            <el-table-column width="" align="center" label="被推荐者">
                <template slot-scope="scope">
                    <p v-for="i,k in scope.row.reg_name" :key="k">{{i}}</p>
                </template>
            </el-table-column>
            <el-table-column width="" align="center" label="类型">
                <template slot-scope="scope">
                    <p v-if="scope.row.type == 0">推荐维修厂</p>
                    <p v-if="scope.row.type == 1">推荐运营商</p>
                </template>
            </el-table-column>
            <el-table-column width="" align="center" property="refund_price" label="奖励金额"></el-table-column>
            <el-table-column width="" align="center" property="create_time" label="时间"></el-table-column>
        </el-table>
        <p class="summary">{{agentRecomListData.total}}</p>
        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage2(this.currentRow,currentPage2)" :current-page.sync="currentPage2" :page-count='agentRecomListData.rows' >
            </el-pagination>
        </div>
      </el-dialog>

      <el-dialog title="系统使用费" :visible.sync="dialogTableVisible2">
        <el-table :data="agentSystemFeeListData.list">
            <el-table-column width="" align="center" property="company" label="运营商名称"></el-table-column>
            <el-table-column width="" align="center" property="phone" label="运营商联系方式"></el-table-column>
            <el-table-column width="" align="center" property="create_time" label="支付时间"></el-table-column>
            <el-table-column width="" align="center" property="total_fee" label="支付金额"></el-table-column>
        </el-table>
        <p class="summary">{{agentRecomListData.total}}</p>
        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage3(this.currentRow,currentPage3)" :current-page.sync="currentPage3" :page-count='agentSystemFeeListData.rows' >
            </el-pagination>
        </div>
      </el-dialog>

      <el-dialog title="区域使用费" :visible.sync="dialogTableVisible3">
        <el-table :data="agentPledgeListData.list">
            <el-table-column width="" align="center" property="company" label="运营商名称"></el-table-column>
            <el-table-column width="" align="center" property="phone" label="运营商联系方式"></el-table-column>
            <el-table-column width="" align="center" property="money" label="支付金额"></el-table-column>
            <el-table-column width="" align="center" label="支付凭证">
                <template slot-scope="scope">
                    <img :preview="scope.row.voucher" class="preview-img" :src="scope.row.voucher" alt="">
                </template>
            </el-table-column>
            <el-table-column width="" align="center" property="" label="地区">
                <template slot-scope="scope">
                    <p v-for="i,k in scope.row.area_name" :key="k">{{ i.county }}-{{ i.city }}</p>
                </template>
            </el-table-column>
            <el-table-column width="" align="center" property="create_time" label="支付时间"></el-table-column>
        </el-table>

        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage4(this.currentRow,currentPage4)" :current-page.sync="currentPage4" :page-count='agentPledgeListData.rows' >
            </el-pagination>
        </div>
      </el-dialog>
      <el-dialog title="提现" :visible.sync="dialogTableVisible4">
        <el-table :data="agentCashListData.list">
            <el-table-column width="" align="center" property="company" label="运营商名称"></el-table-column>
            <el-table-column width="" align="center" property="leader" label="负责人"></el-table-column>
            <el-table-column width="" align="center" property="phone" label="电话"></el-table-column>
            <el-table-column width="" align="center" property="money" label="提现金额"></el-table-column>
            <el-table-column width="" align="center" property="sur_amount" label="余额"></el-table-column>
            <el-table-column width="" align="center" property="create_time" label="提现时间"></el-table-column>
            <el-table-column width="" align="center" property="audit_time" label="审核时间"></el-table-column>
            <el-table-column width="" align="center" property="audit_person" label="审核人"></el-table-column>
        </el-table>
        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage5(this.currentRow,currentPage5)" :current-page.sync="currentPage5" :page-count='agentCashListData.rows' >
            </el-pagination>
        </div>
      </el-dialog>


  </div>
</template>

<script>
export default {
  data(){
    return {
      token: this.$store.state.user.token3,
      // 所有数据
      tableData: [],
      agentCardIncListData: [],
      agentRecomListData: [],
      agentSystemFeeListData: [],
      agentPledgeListData: [],
      agentCashListData: [],
      keyword: '',
      loading: false,
      currentRow:[],
      dialogTableVisible:false,
      dialogTableVisible1:false,
      dialogTableVisible2:false,
      dialogTableVisible3:false,
      dialogTableVisible4:false,
      currentPage: 1,
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      currentPage5: 1,
    }
  },
  created(){
    this.fundAgentList();
    this.preview()
  },
  methods:{
    // 搜索
    search(){
      this.fundAgentList()
    },
    // 列表数据
    fundAgentList(page = 1){
      this.loading = true;
      this.currentPage = page;
      this.$http3.fundAgentList({
        token: this.token,
        key: this.keyword,
        page:page
      }).then(res=>{
        this.tableData =
        res.data.code == 1?
        res.data.data: []
        this.loading = false
      })
    },
    // 资金管理-收入-售卡分佣
    agentCardIncList(e,page=1){
      this.agentCardIncListData = [];
      this.currentRow = e;
      this.currentPage1 = page;
      this.dialogTableVisible = true;
      this.$http3.agentCardIncList({
        token: this.token,
        aid: e.aid,
        page: page
      }).then(res=>{
        this.agentCardIncListData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    // 资金管理-收入-推荐奖励
    agentRecomList(e,page=1){
      this.agentRecomListData = []
      this.currentRow = e;
      this.currentPage2 = page;
      this.dialogTableVisible1 = true;
      this.$http3.agentRecomList({
        token: this.token,
        aid: e.aid,
        page: page
      }).then(res=>{
        this.agentRecomListData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    // 资金管理列表-支出-系统使用费
    agentSystemFeeList(e,page = 1){
      this.agentSystemFeeListData = [];
      this.dialogTableVisible2 = true;
      this.currentRow = e;
      this.currentPage3 = page;
      this.$http3.agentSystemFeeList({
        token: this.token,
        aid: e.aid,
        page: page
      }).then(res=>{
        this.agentSystemFeeListData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    //  资金管理列表-支出-地区使用费
    agentPledgeList2(e,page = 1){
      this.agentPledgeListData = []
      this.currentRow = e;
      this.currentPage4 = page;
      this.dialogTableVisible3 = true;
      this.$http3.agentPledgeList2({
        token: this.token,
        aid: e.aid,
        page: page
      }).then(res=>{
        this.agentPledgeListData =
        res.data.code == 1?
        res.data.data: []
        this.$previewRefresh()
      })
    },
    agentCashList(e,page = 1){
      this.agentCashListData = [];
      this.currentRow = e;
      this.currentPage5 = page;
      this.dialogTableVisible4 = true;
      this.$http3.agentCashList({
        token: this.token,
        aid: e.aid,
        page: page
      }).then(res=>{
        this.agentCashListData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    preview(){
      this.$preview.on('imageLoadComplete',(e,item)=>{
      	this.$preview.self.template.style.zIndex = 99999
      })
    },
    // 分页
    onpage1(e,p){
      this.agentCardIncList(e,p)
    },
    onpage2(e,p){
      this.agentRecomList(e,p)
    },
    onpage3(e,p){
      this.agentSystemFeeList(e,p)
    },
    onpage4(e,p){
      this.agentPledgeList2(e,p)
    },
    onpage5(e,p){
      this.agentCashList(e,p)
    },
    onpage(p){
      this.fundAgentList(p)
    },
  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
